<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Notepad</title>

    <!-- bootstrap -->
    <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

    <!-- animate.css -->
    <link rel="stylesheet" href="./assets/css/animate.min.css" />

    <!-- mui框架css -->
    <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

    <!-- mescroll下拉刷新和上拉加载插件 -->
    <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css">

    <!-- 重置样式 -->
    <link rel="stylesheet" href="./assets/css/reset.css" />

    <!-- 公共样式 -->
    <link rel="stylesheet" href="./assets/css/common.css" />

    <!-- 页面独立的 -->
    <link rel="stylesheet" href="./assets/css/index.css" />
</head>

<body>
    <!-- 搜索 -->
    <div class="search">
        <div class="box">
            <div class="icon">
                <span class="glyphicon glyphicon-search"></span>
            </div>

            <input class="input" placeholder="请输入姓名" id="search" />

            <button class="btn" size="mini" type="default" id="keyword">搜索</button>
        </div>
    </div>

    <!-- 分类 -->
    <div class="type wow fadeInUp">
        <div class="list">
            <div class="item active" data-typeid="0">全部</div>
        </div>
    </div>

    <!-- 列表 -->
    <div class="contact wow fadeInUp mescroll" data-wow-delay="100ms" id="cardlist">
        <div class="list"> </div>
    </div>

    <!-- 底部 -->
    <div class="tabbar">
        <div class="box">
            <a href="index.html" class="item">
                <span class="icon glyphicon glyphicon-home"></span>
                <span class="name">首页</span>
            </a>
            <a href="contactadd.html" class="item">
                <span class="icon glyphicon glyphicon-list-alt"></span>
                <span class="name">新建</span>
            </a>
            <a href="my.html" class="item">
                <span class="icon glyphicon glyphicon-user"></span>
                <span class="name">我的</span>
            </a>
        </div>
    </div>
</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- mui框架js -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- mescroll下拉刷新和上拉加载插件 -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- 请求插件 -->
<script src="./assets/plugins/axios/axios.min.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- 引入cookie -->
<script src="./assets/plugins/cookle.js"></script>
<!-- 校验用户是否登陆 -->
<script src="./assets/plugins/check.js"></script>

<script>
    //实例化wow.js
    new WOW().init();


    let Business = cookie.get('Business') ? JSON.parse(cookie.get('Business')) : {};

    // 请求分类数据
    (async function () {
        let result = await POST({
            url: 'card/card/type',
        })

        if (result.code == 1 && result.data) {
            result.data.forEach((item) => {
                let str = `
                     <div class="item" data-typeid="${item.id}">${item.name}</div>
                `
                $(".type .list").append(str)
            })
        }
    })();

    // 页码
    let page = 1;
    // 每页显示数量
    let limit = 10;
    // 分类ID
    let typeid = 0

    var mescroll = new MeScroll("cardlist", { //第一个参数"mescroll"对应上面布局结构div的id
        down: {
            callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
        },
        up: {
            callback: upCallback,
            auto: true,  //是否在初始化完毕之后自动执行一次上拉加载的回调
            page: {
                size: limit //每页数据条数,默认10
            },
            toTop: {
                //回到顶部按钮
                src: "./assets/images/top.svg", //图片路径,默认null,支持网络图
                offset: 50 //列表滚动1000px才显示回到顶部按钮	
            },
            empty: {
                tip: "暂无相关数据~" //提示
            },
        }
    })


    //下拉刷新的回调
    function downCallback() {
        // 处理方式一: 重置mescroll内部变量(如mescroll.num=1和mescroll.hasNext=true), 自动触发upCallback
        mescroll.resetUpScroll();
        $("#cardlist .list").html('')
    }

    // 上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10
    async function upCallback(val) {
        page = val.num;
        let result = await POST({
            url: 'card/card/index',
            params: {
                page: page,
                limit: limit,
                businessid: Business.id,
                typeid: typeid,
                search: $("#search").val()
            }
        })

        if (result.code == 0) {
            mui.toast(result.msg);
            mescroll.endBySize(0, 0);
            return false;
        }

        let list = result.data ? result.data.list : [];
        let count = result.data ? result.data.count : 0;

        //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
        //必传参数(当前页的数据个数, 总数据量)
        mescroll.endBySize(list.length, count);

        setListData(list)
    }

    function setListData(data) {
        data.forEach((item) => {
            let str = `
                <div class="item">
                    <div class="content">
                        <h3 class="title">
                            <a href="ContactAdd.html">${item.nickname}</a>
                        </h3>

                        <div class="info">
                            <div class="icon">
                                <image src="./assets/images/info.png"></image>
                            </div>
                            <div class="desc">
                                ${item.remark}
                            </div>
                        </div>
                    </div>

                    <div class="call icon">
                        <image src="./assets/images/call.png" style="cursor: pointer;" onclick="makecall('${item.mobile}')"></image>
                    </div>

                    <div class="operation">
                        <button type="button" class="btn btn-primary" onclick="edit('${item.id}')">编辑</button>
                        <button type="button" class="btn btn-danger" onclick="del('${item.id}', '${item.nickname}')">删除</button>
                    </div>
                </div>
            `
            $("#cardlist .list").append(str)
        })
    }

    $("#keyword").click(function () {
        downCallback()
    })

    $(document).keydown(function (e) {
        if (e.keyCode == 13) {
            downCallback()
        }
    })

    // 点击分类筛选
    $(".type .list").on('click', '.item', function (e) {
        typeid = $(this).attr('data-typeid')
        $(this).addClass('active').siblings().removeClass('active')
        downCallback()
    })

    // 编辑
    function edit(id) {
        location.href = "contactedit.html?cardid=" + id;
    }

    // 删除
    function del(id, val) {
        mui.confirm('删除', `确认是否删除${val}?`, ['确定', '取消'], async function (e) {
            if (e.index == 0) {
                let result = await POST({
                    url: 'card/card/del', params: {
                        businessid: Business.id,
                        cardid: id
                    }
                })

                if (result.code == 1) {
                    mui.toast(result.msg);
                    downCallback()
                }
                else {
                    mui.toast(result.msg);
                }
            }
        })
    }

    // 拔打电话
    function makecall(val) {
        mui.confirm('拔号', '确认是否拔号打电话?', ['确定', '取消'], async function (e) {
            if (e.index == 0) {
                location.href = `tel:${val}`
            }
        })
    }
</script>